<!--
 * @Description: file content
 * @Author: Zt2tzzt
 * @Date: 2021-09-18 11:36:22
 * @LastEditors: ZeT1an
 * @LastEditTime: 2022-05-05 21:50:52
 * @LastEditContent: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css" type="text/css">
</head>

<body>
  <div id="app"></div>

  <template id="my-app">
    <template v-if="books.length > 0">
      <table>
        <thead>
          <th>序号</th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(book, index) of books">
            <td>{{ index + 1 }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.date }}</td>
            <!-- <td>{{ formatPrice(book.price) }}</td> -->
            <td>{{ formatPrice(book.price) }}</td>
            <td>
              <button :disabled="book.count <= 1" @click="decrement(index)">-</button>
              <span class="counter">{{ book.count }}</span>
              <button @click="increment(index)">+</button>
            </td>
            <td>
              <button @click="removeBook(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>总价格：{{ formatPrice(totalPrice) }}</h2>
    </template>

    <template v-else>
      <h2>购物车为空~</h2>
    </template>
  </template>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="./index.js"></script>
</body>

</html>